<template>
  <default-home-card icon="BarChartOutlined" title="数据统计">
    <a-form class="smart-query-form" v-privilege="'support:changeLog:query'">
    <a-row class="smart-query-form-row">
      <a-form-item label="时间" class="smart-query-form-item">
        <a-date-picker  picker="month" valueFormat="YYYY-MM"   v-model:value="queryForm.createTime" style="width: 150px" />
      </a-form-item>
      <a-form-item class="smart-query-form-item">
        <a-button-group>
          <a-button type="primary" @click="queryStaticData">
            <template #icon>
              <ReloadOutlined />
            </template>
            查询
          </a-button>
     
        </a-button-group>
      </a-form-item>
    </a-row>
  </a-form>
    <div class="echarts-box">
      <div class="gradient-main" id="gradient-main"></div>
    </div>
  </default-home-card>
</template>
<script setup>
import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
import * as echarts from 'echarts';
import {reactive, ref,onMounted} from 'vue';
import { homeApi } from '/@/api/system/home-api';


const queryFormState = {
  createTime: undefined,
  year: "",
  month: "",
};
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });

onMounted(() => {
  currentDayAndNow(()=>{
    queryStaticData();
  })
  
});

function currentDayAndNow(fn) {
		    let date = new Date()
		    var strYear = date.getFullYear()
		   
		    var strMonth = date.getMonth() + 1
		    if (strMonth < 10) {
		        strMonth = "0" + strMonth
		    }
		    
		    queryForm.createTime = strYear + "-" + strMonth 
        
        
		    if (typeof fn === "function") fn()
		}



async function queryStaticData() {
    try {
      queryForm.year = queryForm.createTime.split("-")[0]
      queryForm.month = queryForm.createTime.split("-")[1]
      const result = await homeApi.staticMonthApi(queryForm);
   
      init(result)
    } catch (err) {
     
    } finally {
     
    }
  }

 function init(result) {

  let option = {
    
    tooltip: {
      trigger: 'axis',
    
    },
    legend: {
      data: ['收藏', '转发', '点赞', '浏览', '快速选型'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: result.data.dates,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '收藏',
        type: 'line',
    
        smooth: true,
 
        symbolSize:10,  // 设置节点大小
        symbol:"circle",  // 设置节点样式  
        data: result.data.collect,
      },
      {
        name: '转发',
        type: 'line',

        smooth: true,
       
        symbolSize:10,  // 设置节点大小
        symbol:"circle",  // 设置节点样式  


        data: result.data.forward,
      },
      {
        name: '点赞',
        type: 'line',
 
        smooth: true,
        
        symbolSize:10,  // 设置节点大小
        symbol:"circle",  // 设置节点样式  


        data: result.data.like,
      },
      {
        name: '浏览',
        type: 'line',

        smooth: true,
        
        symbolSize:10,  // 设置节点大小
        symbol:"circle",  // 设置节点样式  


        data: result.data.view,
      },
      {
        name: '快速选型',
        type: 'line',

        smooth: true,
       
        symbolSize:10,  // 设置节点大小
        symbol:"circle",  // 设置节点样式  
 
        
   
        data: result.data.quickSelect,
      },
    ],
  };
  let chartDom = document.getElementById('gradient-main');
  if (chartDom) {
    let myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }
}
</script>
<style lang="less" scoped>
.echarts-box {
  display: flex;
  align-items: center;
  justify-content: center;

  .gradient-main {
    width: 1200px;
    height: 300px;
    background: #fff;
  }
}
</style>
